<template>
  <div class="compage">
    <span @click="fanye($event)"><p>上一页</p></span>
    <span :class="dqys == n ? 'active':''" v-for="n in zys" @click="fanye($event)"><p>{{n}}</p></span>
    <span @click="fanye($event)"><p>下一页</p></span>
  </div>
</template>
<script>
export default {
  name: "compage",
  data() {
    return {
      zts: 1,
      counter: {},
      zys: 1,
      dqys: 1,
      start_ts: 0
    };
  },
  props: {
    america: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  created() {
    // this.counter = this.america;
    // console.log(this.america, "------counter");
    //     this.$watch("america", function(newVal, oldVal) {
    //   console.log("newVal", newVal); //这里再感受下值拿到了没
    // });
    this.$watch("america", function(newVal, oldVal) {
      this.counter = newVal;
      // console.log(this.counter); //这里再感受下值拿到了没
      this.zts = newVal.subjects.length;
      this.zys = Math.ceil(this.zts/6);
      console.log(this.zys)
    });
  },
  methods: {
    fanye(e) {
      if(e.target.innerHTML=='上一页'){
        if (Number(this.dqys) == 1) {
          this.dqys = 1
        }else{
          this.dqys = Number(this.dqys) - 1
        }
      }else if(e.target.innerHTML=='下一页'){
        if (Number(this.dqys) == this.zys) {
          this.dqys = this.zys
        }else{
          this.dqys = Number(this.dqys) + 1
        }
      }else{
        this.dqys = e.target.innerHTML;
      }
      this.start_ts = (this.dqys-1)*6
      this.$emit('ievent',{'dd':this.start_ts });
    }
  }
};
</script>
<style scoped>
  .compage{
    width: 100%;
    float: left;
    margin: 20px 0;
  }
  .compage span{
    display: block;
    float: left;
    height: 32px;
    border: 1px solid #d6d6d6;
    margin: 4px 4px;
    cursor: pointer;
  }
  .compage .active{
    background: lightblue;
    border-color: lightblue;
    color: #fff;
  }
  .compage .active p{
    color: #fff;
  }
  .compage span p{
    font-size: 14px;
    color: #666;
    line-height: 32px;
    padding: 0 12px;
  }
</style>
